<template>
  <div class="SubmitOrder" v-if="show">
    <!-- 地址 -->
    <div class="SubmitOrder_address" v-if="online == 1" @click="goToAdderss">
      <van-cell v-if="memberAddress.logisticsId != 0" class="icon" is-link>
        <template #title>
          <h2>
            <van-icon name="location-o" size="20" />收货人：{{
              memberAddress.name
            }}
            <span>{{ memberAddress.mobile }}</span>
          </h2>
          <p>
            {{ memberAddress.provinceName }}{{ memberAddress.cityName
            }}{{ memberAddress.countyName }}{{ memberAddress.address }}
          </p>
        </template>
      </van-cell>
      <van-contact-card v-else type="add" @click="goToAdderss" />
    </div>
    <!-- 商品 -->
    <div class="SubmitOrder_product">
      <van-row v-for="(item, index) in productInfoList" :key="index">
        <van-col span="5">
          <img :src="$base.baseImg + item.img[0]" />
        </van-col>
        <van-col span="19">
          <div class="SubmitOrder_product_price">
            <p>{{ item.proName }}</p>
            <p>
              价格：￥{{ (item.price / 100).toFixed(2) }}
              <span>数量×{{ item.num }}</span>
            </p>
          </div>
        </van-col>
      </van-row>
    </div>
    <!-- 价格 -->
    <van-cell-group class="SubmitOrder_remarks">
      <van-cell
        title="商品价格"
        :value="'￥' + (orderData.amount / 100).toFixed(2)"
      />
      <van-cell
        title="会员优惠"
        :value="((orderData.amount - orderData.payAmount) / 100).toFixed(2)"
      />
      <van-cell title="运费" value="包邮" />
    </van-cell-group>
    <!-- 提交 -->
    <div class="submit">
      <van-row>
        <van-col span="17">
          <h2>合计￥ {{ (orderData.payAmount / 100).toFixed(2) }}</h2>
        </van-col>
        <van-col span="7">
          <van-button round block color="#e9c790" @click="submitOrder"
            >立刻购买</van-button
          >
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import {
  Cell,
  CellGroup,
  Icon,
  Col,
  Row,
  Field,
  Toast,
  ContactCard,
  Button,
} from "vant";

Vue.use(Button);
Vue.use(ContactCard);
Vue.use(Field);
Vue.use(Col);
Vue.use(Row);
Vue.use(Icon);
Vue.use(Cell);
Vue.use(CellGroup);
@Component({})
export default class SubmitOrder extends Vue {
  private show = true;
  private productInfoList = [];
  private orderData = {};
  private form = {
    skuList: JSON.parse(this.$route.query.skuList as string),
  };
  private online = this.$route.query.online;
  private memberAddress = {
    logisticsId: 0,
  };
  private mounted() {
    this.$common.setWxConfig(window.location.href).then((res: boolean) => {
      if (res) {
        this.$common.getAuthToken(this.getData);
      }
    });
  }

  private getData() {
    this.$post(`prepositionBuyPro`, this.form).then((res: any) => {
      if (res.code == 0) {
        this.productInfoList = res.data.proList;
        this.memberAddress = res.data.logistics;
        this.orderData = {
          amount: res.data.amount,
          payAmount: res.data.payAmount,
        };
        this.show = true;
      }
    });
  }

  private submitOrder() {
    let that = this;
    if (
      this.$route.query.online == "1" &&
      this.memberAddress.logisticsId == 0
    ) {
      Toast.fail("收货地址必填");
      return;
    }
    this.$post(`buyPro`, {
      logisticsId: this.memberAddress.logisticsId,
      skuList: this.form.skuList,
    }).then((res: any) => {
      this.$wx.ready(() => {
        this.$wx.chooseWXPay({
          timestamp: res.data.wx.timestamp,
          nonceStr: res.data.wx.noncestr,
          package: res.data.wx.package,
          signType: res.data.wx.signType,
          paySign: res.data.wx.sign,
          success: function (res: any) {
            if (res.errMsg == "chooseWXPay:ok") {
              that.$router.push(`paymentResults/${this.$route.params.id}`);
            } else if (res.errMsg == "chooseWXPay:cancel") {
              Toast.success("取消支付成功！");
            } else if (res.errMsg == "chooseWXPay:fail") {
              Toast.fail("支付失败！");
            }
          },
        });
      });
    });
  }
  private goToAdderss() {
    this.$router.push(`/addressList`);
  }
}
</script>

<style lang="scss" scoped>
.SubmitOrder {
  width: 100%;
  & > .SubmitOrder_address {
    width: 100%;
    padding: 20px 0;
    background-color: #ffffff;
    box-sizing: border-box;
    border-bottom: 1px solid #f2f2f2;
    & > .icon {
      & > i {
        margin-top: 50px;
      }
    }
    h2 {
      font-size: 28px;
      font-weight: 500;
      color: #333333;
      line-height: 2;
      overflow: hidden;
      i {
        float: left;
        margin-top: 10px;
      }
      span {
        float: right;
      }
    }
    p {
      font-size: 26px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 1.5;
    }
  }
  & > .SubmitOrder_product {
    width: 100%;
    padding: 30px;
    box-sizing: border-box;
    background-color: #ffffff;
    img {
      width: 100%;
      max-height: 150px;
      display: block;
    }
    .SubmitOrder_product_price {
      width: 100%;
      padding-left: 10px;
      & > p {
        font-size: 28px;
        font-weight: 500;
        color: #333333;
        line-height: 2;
        overflow: hidden;
        span {
          float: right;
        }
      }
      & > .SubmitOrder_product_icon {
        display: inline-block;
        font-size: 22px;
        line-height: 1.5;
        background: linear-gradient(90deg, #ff973a, #ff6b37);
        border-radius: 22px;
        padding: 0 20px;
        color: #ffffff;
        margin-right: 10px;
      }
    }
  }
  & > .SubmitOrder_remarks {
    margin-top: 20px;
  }
  & > .submit {
    width: 100%;
    background-color: #fff;
    position: fixed;
    left: 0;
    bottom: 0;
    padding: 20px 30px;
    box-sizing: border-box;
    h2 {
      font-size: 40px;
      font-weight: 500;
      color: #333333;
      line-height: 2;
    }
    img {
      width: 100%;
      display: block;
    }
  }
}
</style>
